import React from 'react';
import parse from 'html-react-parser';
import ImageWidget from '../ImageWidget';


const RichTextRenderer = ({ html }) => {
    const options = {
        replace: ({ name, attribs, children }) => {
            if (name === 'img' && attribs) {
                const { src, alt, style } = attribs;
                const styleArray = style ? style.split(';') : [];
                const width = styleArray.find(item => item.includes('width'))?.split(':')[1]?.trim();
                const height = styleArray.find(item => item.includes('height'))?.split(':')[1]?.trim();
                return (
                    <ImageWidget
                        src={src}
                        alt={alt}
                        style={{
                            width,
                            height
                        }}
                    />
                );
            }
        },
    };

    return <div>{parse(html, options)}</div>;
};

export default RichTextRenderer;